<template>
  <div :id="id" class="main" :style="{ width: '100%', height: '100%' }"></div>
</template>
<script>
// import { getChartYearData } from "@/api/standard/m";
export default {
  name: "YearChart",
  props: {
    height: {
      type: String,
      default: "300px"
    },
    text: {
      type: String,
      default: "柱状图"
    },
    itemArray: {
      type: Array,
      default: () => ["图例1", "图例2"]
    },
    dataSource: {
      type: Object,
      default: () => ({})
    },
    description: {
      type: String,
      default: "入库数量"
    }
  },
  data() {
    return {
      myChart: "",
      id: "yearChartId"
    };
  },
  computed: {},
  methods: {
    setOption() {
      let dom = 800;
      let barWidth = 40;
      let colors = []
      for(let i = 0;i<20;i++){
        colors.push({
          type: 'linear',
          x: 0,
          x2: 1,
          y: 0,
          y2: 0,
          colorStops: [
            {
              offset: 0,
              color: '#59B8FF' // 最左边
            }, {
              offset: 0.5,
              color: '#32A4FA' // 左边的右边 颜色
            }, {
              offset: 0.5,
              color: '#4EB3FF' // 右边的左边 颜色
            }, {
              offset: 1,
              color: '#72C2FF'
            }]
        })
      }
      this.myChart.setOption({
        color: ["#4ba5f9"],
        title: {
          text: this.text,
          x: "center",
          show: false
        },
        xAxis: {
          type: "category",
          data: this.dataSource.column,
          axisTick: {
            alignWithLabel: true
          },
          // x轴的字体样式
          axisLabel: {
            show: true
          },
          // x轴的颜色和宽度
          axisLine: {
            show: true,
            lineStyle:{
              color:'rgba(0,0,0,0.45)'
            }
          },
          //axisTick: {
          //  show: true
          //},
          splitLine: {
            //网格线
            show: false
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true
          },
          axisLine: {
            show: true,
            lineStyle:{
              color:'rgba(0,0,0,0.45)'
            }
          },
          axisTick: {
            show: false
          },
          splitLine: {
            //网格线
            show: false
          }
        },
        // tooltip: {
        //   trigger: "axis",
        //   axisPointer: {
        //     // 坐标轴指示器，坐标轴触发有效
        //     type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
        //   }
        // },
        tooltip: {
          formatter: function(params, callback) {
            return params.marker + params.name + "月入库数量：" + params.value;
          }
        },
        grid: {
          left: '0%',
          right: '4%',
          bottom: '0',
          top: '10%',
          containLabel: true
        },
        //存在多种数据才需要图例
        legend: {
          orient: "vertical",
          x: "left",
          y: "center",
          data: this.itemArray,
          show: false
        },
        //多种数据时需要自定义series,每种数据对应数组中的一个值
        series: [{
          name: this.description,
          type: "bar",
          barWidth: "60%",
          itemStyle: {
            normal: {
              color: function(params) {
                return colors[params.dataIndex % 7];
              }
            }
          },
          label: {
            show: false,
            position: [barWidth / 2, -(barWidth + 20)],
            color: '#ffffff',
            fontSize: 14,
            fontStyle: 'bold',
            align: 'center',
          },
          //label: {
          //  normal: {
          //    show: false, //柱状显示数据
          //    position: "outside"
          // }
          //},
          data: this.dataSource.values
        }]
      });
    },
    //初始化
    initEcharts() {
      let echarts = require("echarts");
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById(this.id), "light");
      // 绘制图表
      this.setOption();
      window.addEventListener("resize", () => {
        this.myChart.resize();
      });
    }
  },
  mounted() {
    // this.getYearData();
  },
  watch: {
    dataSource: function() {
      this.setOption();
    }
  }
};

</script>
